import React, { useRef } from 'react'
import { Button, Space, Swiper, Toast } from 'antd-mobile'
import { SwiperRef } from 'antd-mobile/es/components/swiper'

import style from "../css/swiper.module.css"
import { useNavigate } from 'react-router-dom'
export default function Swipers() {
  const colors = [require('../img/0-2引导页-1.png'), require('../img/0-2引导页-2.png'), require('../img/0-2引导页-3.png')]
  const navigate = useNavigate()
  const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
      <div
        className={style.content}
        onClick={(e) => {
          if ( e.target.src =='http://localhost:3000/static/media/0-2%E5%BC%95%E5%AF%BC%E9%A1%B5-3.a6999b8e856e8b99d013.png') {
            navigate('/home')
          }
        }}
      >
        <img className={style.img} src={color} />
      </div>
    </Swiper.Item>
  ))
  return (
    <>
    
    <Space direction='vertical' block>
          <Swiper
            style={{
              '--border-radius': '8px',
            }}
            defaultIndex={0}
          >
            {items}
          </Swiper>
    </Space>
    
    </>
  )
}

